<template>
  <div class="style">
    <el-col :span="24" class="action-bar">
			<el-button type="primary" size="medium" @click="newStyle">新增</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="name" label="名称" width="150" sortable>
			</el-table-column>
			<el-table-column prop="start_time" label="活动时间" width="150" sortable>
			</el-table-column>
			<el-table-column prop="sort" label="排序" width="100" sortable>
			</el-table-column>
			<el-table-column prop="link_url" label="链接" width="100" sortable>
				<template slot-scope="scope">
					<div>
						<el-button type="primary"
						v-clipboard:copy="scope.row.link_url"
						v-clipboard:success="onCopy"
						size="mini"
						v-clipboard:error="onError">复制链接</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<div>
						<el-button type="primary" size="mini" @click="editorStyle(scope.row.id)">编辑</el-button>
						<el-button type="danger" class="danger-btn" size="mini" @click="deleteStyle(scope.row.id)">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>

    <!-- 新增 -->
		<el-dialog title="新增商会" :visible.sync="addFormVisible" width="60%" @close="initData">
			<el-form :model="addForm" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="封面图片" prop="name">
                    <el-upload
                        class="avatar-uploader"
                        action="https://tengxiansh.dindong.cn/api/file/upload-img"
						name="photo"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="memberPicImg" :src="memberPicImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
				</el-form-item>
				<el-form-item label="活动描述" prop="desc">
					<el-input v-model="addForm.desc" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="活动时间" prop="activity-time">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" v-model="addForm.startTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="addForm.sortnum" auto-complete="off" type="number"></el-input>
				</el-form-item>
				<el-form-item label="详细信息">
					<editor v-model="addForm.content" v-if="contentFlag"></editor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="setChamberCommerceStyle" v-if="!editorFlag">提交</el-button>
				<el-button type="primary" @click="setChamberCommerceStyle" v-else>提交</el-button>
			</div>
		</el-dialog>

  </div>
</template>

<script>
import editor from '@/components/editor'
export default {
  data(){
    return{
		memberPicImg:'',//商店的图片
		memberPicId:'',//商店的图片id
		editorFlag:'',
		contentFlag:true,//富文本的显示
      	addFormVisible: false,//新增界面是否显示
      //新增界面数据
		addForm: {
			name: '',
			desc:'',//描述
			startTime: '',
			sortnum: '',
			content:''
		},
		id:'',//数据的id
		users:[],
		page:1,
		totalPage:0
    }
  },
  components:{
	  editor
  },
  methods:{
	  onCopy(e){
			this.$message({
				type:'success',
				message:'复制成功'
			})
		},
		onError(erro){
			this.$message({
				type:'error',
				message:'复制失败'
			})
		},
	  beforeAvatarUpload(file) {
			//上传照片前的操作
			console.log(file,555)
        },
        handleAvatarSuccess(res, file) {
			//上传照片成功
			if(res.data){
				this.memberPicImg=res.data.img_url;
				this.memberPicId=res.data.id;
			}
		},
	  async chamberCommerceStyleList(){
		  //获取风采列表
		  const res=await this.$api.chamberCommerceStyleList({
			  page:this.page
		  })
		  if(res.data.level=='success'){
			  this.users=res.data.data
			  this.totalPage=res.data.data.total
		  }
	  },
	  pageChange(e){
			//翻页
			this.page=e;
			this.chamberCommerceStyleList()
		},
	  newStyle(){
		  //新增
		  this.editorFlag=false;
		  this.addFormVisible=true;
	  },
	  editorStyle(id){
		  //编辑风采
		  this.id=id;
		  this.editorFlag=true;
		  this.chamberCommerceStyleSet(id);
	  },
	  async setChamberCommerceStyle(){
		  //发布新增风采
			const res=await this.$api.setChamberCommerceStyle({
				name:this.addForm.name,
				desc:this.addForm.desc,
				start_time:this.addForm.startTime,
				sort :this.addForm.sortnum,
				content:this.addForm.content,
				id:this.id,
				img_id:this.memberPicId
			})

			if(res.data.level=='success'){
                this.$message({
                    message: res.data.message,
                    type: 'success'
					});
				this.chamberCommerceStyleList();
                this.addFormVisible=false;
            }else{
                this.$message({
                message: res.data.message,
                type: 'error'
                });
            }
	  },
	  async chamberCommerceStyleSet(id){
		  //获取风采内容
		  const res=await this.$api.chamberCommerceStyleSet({
			  id
		  })
		  if(res.data.level=='success'){
			  const data=res.data.data
			  if(data){
				  this.addForm.name=data.name;
					this.addForm.desc=data.desc;
					this.addForm.startTime=data.start_time;
					this.addForm.sortnum=data['sort'];
					this.addForm.content=data.content;
					this.memberPicId=data.img_id;
					this.memberPicImg=data.img_url;
			  }
				this.contentFlag=false;
			  setTimeout(()=>{
				this.contentFlag=true;
			},500)

			  this.addFormVisible=true;
		  }
	  },
	  async deleteStyle(id){
		  //删除风采
		  const judge= this.$confirm('删除该活动?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delChamberCommerceStyle({id});
					if(res.data.level=='success'){
						this.chamberCommerceStyleList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}

				}).catch(() => {

			});
	  },
	  initData(){
		  this.memberPicImg='';
		  this.memberPicId='';
		  this.addForm.name='';
		  this.addForm.desc='';
			this.addForm.startTime='';
			this.addForm.sortnum='';
			this.addForm.content=''
			this.contentFlag=false;
			this.id=''
			setTimeout(()=>{
				this.contentFlag=true;
			},500)
	  }
	},
	mounted() {
		this.chamberCommerceStyleList()
	},
}
</script>
<style lang='scss' scoped>
  .style{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}

		.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
            border: 1px dashed #d9d9d9;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
            object-fit: contain;
        }
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}
	.member .el-dialog__body{overflow: auto;}
</style>
